<template>
  <div class="bg-white rounded-lg shadow-sm p-6">
    <div class="flex justify-between items-center mb-6">
      <div class="flex items-center">
        <h3 class="font-medium text-gray-800">隐私设置</h3>
        <div class="ml-2 px-2 py-0.5 bg-primary/10 rounded text-primary text-xs">已开启</div>
      </div>
      <button class="text-gray-400 hover:text-gray-600">
        <i class="ri-question-line"></i>
      </button>
    </div>
    
    <div class="space-y-5">
      <div v-for="setting in privacySettings" :key="setting.id" class="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 transition-colors duration-200">
        <div>
          <div class="flex items-center">
            <i :class="setting.icon" class="text-gray-400 mr-2"></i>
            <div class="font-medium text-gray-700">{{ setting.title }}</div>
          </div>
          <div class="text-sm text-gray-500 mt-1">{{ setting.description }}</div>
        </div>
        <div class="custom-switch" :class="{ 'checked': setting.enabled }" @click="toggleSetting(setting.id)">
          <div class="switch-slider"></div>
        </div>
      </div>
    </div>
    
    <div class="mt-6 pt-4 border-t">
      <div class="flex items-center justify-between text-sm">
        <span class="text-gray-500">上次更新时间</span>
        <span class="text-gray-700">{{ lastUpdateTime }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const privacySettings = ref([
  {
    id: 1,
    title: '对外公开',
    description: '允许企业主动查看您的简历',
    icon: 'ri-eye-line',
    enabled: true
  },
  {
    id: 2,
    title: '隐藏联系方式',
    description: '仅投递后的企业可见',
    icon: 'ri-lock-line',
    enabled: false
  },
  {
    id: 3,
    title: '隐藏当前公司',
    description: '保护您的求职隐私',
    icon: 'ri-shield-line',
    enabled: true
  }
])

const lastUpdateTime = ref('2025-06-16 10:30')

const toggleSetting = (settingId: number) => {
  const setting = privacySettings.value.find(s => s.id === settingId)
  if (setting) {
    setting.enabled = !setting.enabled
    lastUpdateTime.value = new Date().toLocaleString('zh-CN')
  }
}
</script>

<style scoped>
.custom-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  background-color: #e5e7eb;
  border-radius: 11px;
  transition: all 0.3s;
  cursor: pointer;
}

.custom-switch.checked {
  background-color: #10b981;
}

.switch-slider {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: white;
  transition: all 0.3s;
}

.custom-switch.checked .switch-slider {
  transform: translateX(18px);
}
</style>
